<template>
  <div class="profile gray">
    <div class="user" v-if="!islogin">
      <div class="login_box">
        <router-link to="/login" tag="span">登录</router-link>
        /
        <router-link to="/register" tag="span">注册</router-link>
      </div>
    </div>
    <div class="user" v-else>
      <img src="/imgs/profile/default.jpg" class="avatar">
      <h3 class="user_name">{{ user && user.username }}</h3>
      <h3 class="user_tel">{{ user && user.user_tel }}</h3>
      <div class="edit_profile">编辑个人资料</div>
    </div>
    <div class="row" @click="toManageOrder">我的订单</div>
    <div class="row" @click="toManageAddress">收货地址</div>
    <div class="logout row" v-show="islogin" @click="logout">退出登录</div>
    <banner></banner>
  </div>
</template>

<script>
import Banner from '../common/Banner'
import { mapState } from 'vuex'
export default {
  name: 'Profile',
  data () {
    return {}
  },
  computed: {
    ...mapState(['islogin', 'address']),
    user: {
      get () {
        return JSON.parse(sessionStorage.getItem('user'))
      },
      set (val) {
        sessionStorage.setItem('user', JSON.stringify(val))
      }
    }
  },
  methods: {
    // 退出登录
    logout () {
      this.$store.commit('logout')
    },
    // 前往订单列表
    toManageOrder () {
      if (this.islogin) {
        this.$router.push('/manageorder')
      } else {
        return false
      }
    },
    // 前往收货地址列表
    toManageAddress () {
      if (this.islogin) {
        this.$router.push('/manageaddress')
      } else {
        return false
      }
    }
  },
  components: {
    Banner
  },
  created () {
    if (sessionStorage.getItem('user')) {
      this.user = JSON.parse(sessionStorage.getItem('user'))
      // 请求该用户相关的订单列表
      this.$store.dispatch('getOrderList')
      // 请求该用户相关的地址信息
      this.$store.dispatch('getUserAddress')
    }
  }
}
</script>

<style lang="less" scoped>
.profile {overflow: hidden;
  width: 15rem;
  height: 100%;
  overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
}
// 用户区域
.user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 8rem;
  text-align: center;
  background-color: #fff;
}
.login_box {
  line-height: 1.6rem;
  padding: 0 .6rem;
  background: #eee;
}
.avatar {
  overflow: hidden;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
}
.user_name {
  font-size: .8rem;
  margin-top: .4rem;
}
.user_tel {
  font-size: .64rem;
  margin: .4rem 0;
}
.edit_profile {
  font-size: .48rem;
  color: #666;
}
// 每一行相同样式
.row {
  width: 100%;
  line-height: 2rem;
  font-size: .64rem;
  color: #333;
  text-align: center;
  background-color: #fff;
  margin-top: .4rem;
}
// 退出登录
.logout {
  color: red;
}
</style>
